<template>
    <div>
        <el-breadcrumb>
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
        </el-breadcrumb>
        <div class="content">
            <e-heading>发起赛事</e-heading>
            <el-row>
              <el-col :span="8" v-for="(item,index) in matchList" :key="index">
                  <a class="sport-item" v-bind:href="'#/race/release/'+item.en">
                      <e-img-match v-bind:src="item.imgUrl" alt="" />
                      <div class="m_name">{{item.name}}</div>
                  </a>
              </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default{
    computed: {
      ...mapGetters({
        global: 'global'
      })
    },
    data () {
      return {
        matchList: [
          {
            imgUrl: '/static/images/type/football.png',
            name: '足球',
            en: 'football'
          },
          {
            imgUrl: '/static/images/type/basketball.png',
            name: '篮球',
            en: 'basketball'
          },
          {
            imgUrl: '/static/images/type/badminton.png',
            name: '羽毛球',
            en: 'badminton'
          },
          {
            imgUrl: '/static/images/type/tennis.png',
            name: '网球',
            en: 'tennis'
          },
          {
            imgUrl: '/static/images/type/pingpang.png',
            name: '乒乓球',
            en: 'pingpang'
          },
          {
            imgUrl: '/static/images/type/run.png',
            name: '跑步',
            en: 'run'
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .sport-item {
    text-align: center;
    width: 100%;
    display: block;
    &:hover{
      color:$color-primary;
    }
    .m_name {
        padding: 20px 0;
    }
  }

    
</style>
